/*
 * @Author: taosong 
 * @Date: 2019-12-21 10:10:59 
 * @Last Modified by: taosong
 * @Last Modified time: 2020-01-06 19:26:11
 */

<template>
  <div class="container">
    <div class="video">
      <video @timeupdate="timeupdate" id="video" @click="clickScreen" ref="videos" :src="url"></video>
      <img v-show="showCover" class="imgs" :src="cover" alt />
      <span v-show="showCover" @click="startMv" class="circle"></span>
      <div v-show="showBottom" ref="button" class="button">
        <Button @controlVolume="controlVolume" @pause="pause" ref="iconButton" />
      </div>
      <div>
        <div @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
          <MiniProgress
            id="miniProgress"
            ref="miniProgress"
            v-show="showMiniProgress"
            class="mini-progress"
          />
        </div>
      </div>
      <div v-show="showBottom" ref="progress" class="progress">
        <Progress
          ref="progressWidth"
          :timestart="timestart"
          :timeend="timeend"
          :progresswidth="progresswidth"
        />
      </div>
    </div>
    <div class="scroll">
      <div class="middle">
        <div class="middle-top">
          <span class="icon">MV</span>
          <span class="name">{{name}}</span>
        </div>
        <span class="singer">歌手:&nbsp;&nbsp;{{artistName}}</span>
        <div class="middle-bottom">
          <span class="time">发布时间:&nbsp;&nbsp;{{publishTime}}</span>
          <span class="play-count">播放:&nbsp;&nbsp;{{playCounts}}</span>
        </div>
      </div>
      <div class="bottom">
        <div class="recommend">相关推荐</div>
      </div>
      <sameMv />
    </div>
  </div>
</template>

<script>
import Progress from "../common/progress";
import Button from "../common/button";
import MiniProgress from "../common/miniProgress";
import sameMv from "./components/sameMv";
import { MvUrl, MvUrlData } from "api/mv";
import { format } from "js/common.js";
export default {
  name: "MusicMv",
  data() {
    return {
      url: "",
      artistName: [],
      publishTime: "",
      playCount: 0,
      cover: "",
      showCover: true,
      name: "",
      controlMv: true,
      timeend: "",
      timestart: "",
      progresswidth: 0,
      showBottom: false,
      showMiniProgress: false,
      clientX: 0,
      // 差值
      subtract: 0
    };
  },
  mounted() {
    this.getMvUrl();
  },
  methods: {
    // 获取mv数据
    getMvUrl() {
      let id = this.$route.params.id;
      MvUrl(id).then(res => {
        let {
          data: {
            data: { url }
          }
        } = res;
        this.url = url;
      });
      MvUrlData(id).then(res => {
        let {
          data: {
            data: { artistName, publishTime, playCount, cover, name }
          }
        } = res;
        this.artistName = artistName;
        this.publishTime = publishTime;
        this.playCount = playCount;
        this.cover = cover;
        this.name = name;
      });
    },
    // 首次播放mv
    startMv() {
      this.upTranslate();
      // 播放mv先隐藏掉图片在播放mv
      this.showBottom = true;
      let video = document.getElementById("video");
      this.showCover = false;
      this.$refs.videos.play();
      this.$refs.iconButton.showPlay = true;
      video.volume = 1;
      this.$nextTick(() => {
        this.$refs.progressWidth.getProgressOffsetWidth();
      });
    },
    pause() {
      this.controlMv ? this.pauseMv() : this.startMvs();
    },
    // 停止mv
    pauseMv() {
      this.$refs.iconButton.showPlay = false;
      this.$refs.videos.pause();
      this.controlMv = false;
    },
    // 开始mv
    startMvs() {
      this.$refs.iconButton.showPlay = true;
      this.$refs.videos.play();
      this.controlMv = true;
      this.showBottom = true;
    },
    timeupdate() {
      let video = document.getElementById("video");
      video.duration ? (this.timeend = format(video.duration)) : "";
      video.currentTime ? (this.timestart = format(video.currentTime)) : "";
      this.progresswidth = video.currentTime / video.duration;
    },
    // 点击屏幕
    clickScreen() {
      this.showBottom = !this.showBottom;
      this.showMiniProgress = false;
    },
    // 滚动条上浮动画
    upTranslate() {
      setTimeout(() => {
        this.$refs.progress.style.transform = "translateY(0%)";
        this.$refs.button.style.transform = "translateY(0%)";
      }, 500);
    },
    // 点击屏幕下面消失
    ProgressButton() {
      this.showBottom = true;
      this.showBottom = false;
      this.showMiniProgress = false;
    },
    // 控制音量
    controlVolume(state) {
      let video = document.getElementById("video");
      if (!state) {
        video.volume = 0;
      } else {
        video.volume = 1;
      }
      this.showMiniProgress = true;
    },
    // 音量滚动条
    touchstart() {
      this.clientX = document.getElementById("miniProgress").offsetLeft;
    },
    touchmove(e) {
      let voice = e.touches[0].clientX;
      if (voice > this.clientX && voice < 1127) {
        this.subtract = e.touches[0].clientX - this.clientX;
        this.$refs.miniProgress.moveProgress(this.subtract);
      }
    },
    touchend() {
      let video = document.getElementById("video"),
        voice = this.subtract / 127;
      if (voice > 0 && voice < 1) {
        video.volume = voice;
        this.$children[0].haveVolume();
      } else if (voice === 0) {
        video.volume = 0;
        this.$children[0].noVolume();
      } else {
        video.volume = 1;
        this.$children[0].haveVolume();
      }
    },
    //进入全屏
    FullScreen() {
      var video = document.getElementById("video");
      if (video.requestFullscreen) {
        video.requestFullscreen();
      } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
      } else if (video.webkitRequestFullScreen) {
        video.webkitRequestFullScreen();
      }
    },
    //退出全屏
    exitFullscreen() {
      var video = document.getElementById("video");
      if (video.exitFullscreen) {
        video.exitFullscreen();
      } else if (video.mozCancelFullScreen) {
        video.mozCancelFullScreen();
      } else if (video.webkitCancelFullScreen) {
        video.webkitCancelFullScreen();
      }
    }
  },
  computed: {
    playCounts() {
      return this.playCount > 10000
        ? `${(this.playCount / 1000).toFixed(1)}万`
        : this.playCount;
    }
  },
  components: {
    Progress,
    Button,
    MiniProgress,
    sameMv
  }
};
</script>

<style lang="scss" scoped>
@import "common/scss/mixin.scss";
.container {
  width: 100%;
  height: 100%;
  .video {
    position: relative;
    video {
      width: 100%;
      height: 520px;
      // 加这个属性video才会撑满整个父容器
      object-fit: fill;
    }
    .imgs {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 0.5px solid #fff;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background: url("");
    }
    .progress {
      position: absolute;
      bottom: 40px;
      transition: transform 1s ease;
      transform: translateY(20%);
    }
    .button {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100px;
      transition: transform 2s ease;
      transform: translateY(20%);
      z-index: 100;
    }
    .mini-progress {
      position: absolute;
      bottom: 95px;
      right: 320px;
      z-index: 1000;
    }
  }
  .scroll {
    overflow: scroll;
    .middle {
      @include display-c;
      margin-top: 80px;
      padding: 30px 20px 20px 20px;
      .middle-top {
        @include display-r;
        .icon {
          @include display-r-center;
          color: #d33a31;
          border: 1px solid #d33a31;
          padding: 3px 16px;
          font-size: 23px;
          box-sizing: border-box;
          margin-right: 20px;
        }
        .name {
          font-size: 44px;
          color: #333;
          line-height: 40px;
        }
      }
      .singer {
        margin-top: 40px;
        color: #507daf;
        font-size: 35px;
      }
      .middle-bottom {
        @include display-r;
        color: #999;
        margin-top: 40px;
        font-size: 35px;
        .time {
          padding: 0 20px 0 0;
          border-right: 2px solid #ddd;
        }
        .play-count {
          padding: 0 0 0 20px;
        }
      }
    }
    .bottom {
      @include display-c;
      margin-top: 30px;
      .recommend {
        padding-left: 20px;
        width: 100%;
        height: 70px;
        line-height: 70px;
        background: rgba(0, 0, 0, 0.05);
        color: #666;
      }
    }
  }
}
</style>